<template>
  <div class="login">
    <div class="left">
      <div class="imga"></div>
    </div>
    <div class="right">
      <form action="" @submit.prevent="handleSubmit">
        <div class="title">欢迎登录创思设备管理系统</div>
        <div class="email">
          <div class="wenzi">邮箱</div>
          <input type="email" v-model="email" />
        </div>
        <div class="passw">
          <div class="wenzi">密码</div>
          <input ref="refpassw" type="text" @input="changPattern" />
          <div class="eye">
            <span
              class="iconfont"
              :class="eye ? 'icon-yanjing_xianshi_o' : 'icon-yanjing_yincang_o'"
              @click="changEye"
            ></span>
          </div>
        </div>
        <div class="remeberme">
          <label for="rem">
            <div class="wenzi">记住我</div>
            <input id="rem" type="checkbox" v-model="remember" />
            <span class="hezi">
              <span class="iconfont icon-duihao"></span>
            </span>
          </label>
        </div>
        <div class="forget" @click="push('/login-manage/forgetpassw')">忘记密码</div>
        <button class="submit">登录</button>
        <div class="register">你还没有帐号?<span @click="push('/login-manage/register')"> 注册账号?</span></div>
      </form>
    </div>
  </div>
</template>

<script>
import { ElNotification } from 'element-plus'
import { login } from '../../services/index'
import useEye from '../../hooks/useEye.js'

import { useRouter } from 'vue-router'
import { reactive, ref, toRefs, h } from 'vue'

export default {
  setup(props) {
    const Router = useRouter()
    const _data = reactive({
      email: '',
      remember: true
    })

    let { changEye, eye, password, changPattern, refpassw } = useEye()

    async function handleSubmit() {
      let res = await login({
        email: _data.email,
        password: password.value,
        remember: _data.remember
      })
      if (res.length) {
        console.log(res)
        localStorage.setItem('token', JSON.stringify(res[0]))
        Router.push('/')
      } else {
        ElNotification({
          title: 'Title',
          message: h('i', { style: 'color: teal' }, '邮箱密码错误或用户不存在')
        })
      }
    }

    return {
      ...toRefs(_data),
      push: Router.push,
      changPattern,
      handleSubmit,
      eye,
      changEye,
      refpassw
    }
  }
}
</script>

<style lang="less">
@import '../auto_css/Login.less';
</style>
